<template>
  <div>
    <div>
      <el-card style="margin-bottom: 20px">
        <el-form label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="运单编号:">
                <el-input v-model="form.id"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单编号:">
                <el-input v-model="form.orderId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="调度状态:">
                <el-select v-model="schedulingStatus" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="起始地机构:">
                <el-cascader
                  v-model="form.startAgencyName"
                  :options="tree"
                  :props="props"
                  @change="change1"
                  :filterable="true"
                  placeholder="起始地机构"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="目的地机构:">
                <el-cascader
                  v-model="form.endAgencyName"
                  :options="tree"
                  :props="props"
                  @change="change2"
                  :filterable="true"
                  placeholder="目的地机构"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="当前所在机构:">
                <el-cascader
                  v-model="form.currentAgencyName"
                  :options="tree"
                  :props="props"
                  @change="change3"
                  :filterable="true"
                  placeholder="当前所在机构"
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="btn" style="margin-left: 20px">
            <el-button type="warning" @click="sereach">搜索</el-button>
            <el-button type="danger" @click="reset">重置</el-button>
          </div>
        </el-form>
      </el-card>
    </div>
    <el-card>
      <el-button type="danger" @click="btnok">调度配置</el-button>
      <el-row style="margin-top: 20px; background-color: #fff">
        <el-col :span="3"
          ><el-button @click="quanbu">全部{{ all }}</el-button></el-col
        >
        <el-col :span="3" v-for="(item, index) in btnnum" :key="index"
          ><el-button @click="meige(item.key)"
            >{{ item.name }}{{ item.num }}</el-button
          ></el-col
        >
      </el-row>
      <el-table :data="tableData" border style="width: 100%; font-size: 12px">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="id" label="运单编号"> </el-table-column>
        <el-table-column prop="orderId" label="订单编号"> </el-table-column>
        <el-table-column
          prop="status"
          label="运单状态"
          :formatter="statusformatter"
        >
        </el-table-column>
        <el-table-column
          prop="schedulingStatus"
          label="调度状态"
          :formatter="scheduling"
        >
        </el-table-column>
        <el-table-column prop="startAgencyName" label="起始营业部">
        </el-table-column>
        <el-table-column prop="endAgencyName" label="终点营业部">
        </el-table-column>
        <el-table-column prop="currentAgencyName" label="当前所在机构">
        </el-table-column>
        <el-table-column prop="nextAgencyName" label="下一个机构">
        </el-table-column>
        <el-table-column prop="totalVolume" label="货品总体积(立方米)">
        </el-table-column>
        <el-table-column prop="totalWeight" label="货品总重量(千克)">
        </el-table-column>
        <el-table-column prop="created" label="创建时间"> </el-table-column>
        <el-table-column prop="updated" label="更新时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="oo(row.id)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-dialog title="运输配置" :visible.sync="dialogVisible" width="50%">
      <el-form>
        <el-form-item label="最晚任务下发时间">
          <el-input style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="优先匹配方式">
                <el-select placeholder="请选择">
                  <el-option
                    v-for="item in options1"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { gettreeApi } from "@/api/register";
import { getlistapi, getcountApi } from "@/api/waybill";
const count = {
  1: "新建",
  2: "已装车",
  3: "运输中",
  4: "到达终端网点",
  6: "拒收",
};
export default {
  name: "wayBill",
  data() {
    return {
      dialogVisible: false,
      btnnum: [],
      all: 0,
      tableData: [{}],
      form: {
        page: 1,
        pageSize: 10,
        id: "",
        orderId: "",
        startAgencyName: "",
        startAgencyId: "",
        endAgencyId: "",
        currentAgencyId: "",
        endAgencyName: "",
        currentAgencyName: "",
      },
      props: {
        expandTrigger: "hover",
        label: "name",
        value: "id",
        checkStrictly: true,
      },
      schedulingStatus: "",
      tree: [],
      options: [
        {
          id: 1,
          name: "待调度",
        },
        {
          id: 2,
          name: "未匹配线路",
        },
        {
          id: 3,
          name: "已调度",
        },
      ],
      options1: [
        {
          id: 1,
          name: "转运次数最少",
        },
        {
          id: 2,
          name: "成本最低",
        },
      ],
      total: 0,
    };
  },
  created() {
    this.getcos();
    this.getcount();
    this.getjieku();
  },
  methods: {
    async getcos() {
      const res = await getcountApi();
      for (const key in res.data) {
        this.btnnum.push({
          name: count[key],
          num: res.data[key],
          key,
        });
        // console.log(key);
        this.all = this.all + +res.data[key];
      }
      // console.log(res);
    },
    async getcount() {
      const res = await gettreeApi(this.form);
      console.log(JSON.parse(res.data));
      this.tree = JSON.parse(res.data);
    },
    async getjieku() {
      const res1 = await getlistapi(this.form);
      this.tableData = res1.data.items;
      this.total = +res1.data.counts;
    },
    handleCurrentChange(val) {
      this.form.page = val;
      this.getjieku()
    },
    scheduling(a, b, c) {
      if (c === 1) {
        return "待调度";
      } else {
        return "已调度";
      }
    },
    statusformatter(a, b, c) {
      if (c === 6) {
        return "拒收";
      } else {
        return "到达终端网点";
      }
    },
    change1(a) {
      // console.log(a);
      this.form.startAgencyName = "";
      this.form.startAgencyId = a[a.length - 1] || [];
    },
    change2(a) {
      // console.log(a);
      this.form.endAgencyName = "";
      this.form.endAgencyId = a[a.length - 1] || [];
    },
    change3(a) {
      // console.log(a);
      this.form.currentAgencyName = "";
      this.form.currentAgencyId = a[a.length - 1] || [];
    },
    async sereach() {
      const res = await getlistapi(this.form);
      this.tableData = res.data.items;
      this.total = +res.data.counts;
    },
    reset() {
      (this.form = {
        page: 1,
        pageSize: 10,
        id: "",
        orderId: "",
        startAgencyName: "",
        startAgencyId: "",
        endAgencyId: "",
        currentAgencyId: "",
        endAgencyName: "",
        currentAgencyName: "",
      }),
        this.getjieku();
    },
    quanbu() {},
    async meige(item) {
      // console.log(item);
      console.log(this.form.status);
      const res = await getlistapi({ ...this.form, status: item });
      this.tableData = res.data.items;
      this.total = +res.data.counts;
    },
    btnok() {
      this.dialogVisible = true;
    },

    oo(id) {
      console.log(id);
      this.$router.push({path:'/transit/waybillDetail',query:{id}})
    },
   
  },
};
</script>

<style lang="scss" scoped>
.el-button {
  border: 0px;
  height: 48px;
  width: 120px;
}
</style>